<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts 柱状图头部添加图片</title>
</head>
<body>
<div id="chart"></div>

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

<script>
  var chart = echarts.init(document.getElementById('chart'));

  var option = {
    title: {
      text: '柱状图',
      left: 'center',
      top: 0,
      padding: 10,
      textStyle: {
        fontSize: 16,
        fontWeight: 'bold',
      },
      subtext: 'This is a subtitle',
      subtextStyle: {
        fontSize: 12,
      },
      align: 'center',
      backgroundColor: '#ccc',
      borderRadius: 4,
      borderWidth: 1,
      borderColor: '#ddd',
      shadowBlur: 10,
      shadowOffsetX: 0,
      shadowOffsetY: 5,
      shadowColor: 'rgba(0, 0, 0, 0.5)',
    },
    xAxis: {
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    },
    yAxis: {},
    series: [
      {
        type: 'bar',
        data: [10, 52, 200, 334, 390, 330, 220],
        // markPoint: {
        //   data: [
        //     {
        //       type: 'image',
        //       symbol: 'image://https://upload.jianshu.io/users/upload_avatars/9743788/22ae7769-2b3c-4391-8fb3-7173eda631f3.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/80/h/80/format/webp',
        //       symbolSize: 20,
        //       offset: [0, -10],
        //       label: {
        //         show: false,
        //       },
        //     },
        //   ],
        // },
      },
    ],
  };

  chart.setOption(option);
</script>
</body>
</html>
